<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <!--订单号-->
      <el-table-column
          label="订单号"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.orderId  }}</span>
        </template>
      </el-table-column>
      <!--姓名-->
      <el-table-column
          label="姓名"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <!-- 车型-->
      <el-table-column
          label="车型"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.carType }}</span>
        </template>
      </el-table-column>

      <!--租车费用-->
      <el-table-column
          label="租车费用"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row. rentCarExpenses }}</span>
        </template>
      </el-table-column>

      <!--订单状态-->
      <el-table-column
          label="订单状态"
          width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ state[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

<!--  订单详情弹出框-->
  <el-dialog title="收货地址" v-model="dialogVisible">
    还车地点：
    <br>
    <br>
    <el-divider></el-divider>
    还车车检照片：
    <div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="url in urls">
          <el-image :src="url"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-dialog>
</template>

<script>
import axios from "axios";

export default {
  name: "index",
  data() {
    return {
      state:['未付款','已付款','已过期'],
      dialogVisible: false,  //弹窗
      tableData: [{
        orderId: '',
        name:'asd',
        carType: 'asd',
        rentCarExpenses:'',
        status:''
      }],
      //还车图片
      urls:["https://img0.baidu.com/it/u=3434365774,3342884301&fm=26&fmt=auto&gp=0.jpg","https://img0.baidu.com/it/u=3434365774,3342884301&fm=26&fmt=auto&gp=0.jpg","https://img0.baidu.com/it/u=3434365774,3342884301&fm=26&fmt=auto&gp=0.jpg"]
    }
  },
  methods: {
    //查看订单
    handleEdit(index, row) {
      // console.log(index, row);
      // console.log(row.orderId)
      this.dialogVisible= true;

      axios({
        method:"get",
        url:"order/admin/"+row.orderId
      }).then(resp=>{
        console.log(resp.data.data.returnImage)
        this.urls = resp.data.data.returnImage
      })
    },
    //关闭弹窗
    handleClose(done) {

    }
  },
  created() {
    axios({
      method:"get",
      url: 'order/admin/list',
    }).then(resp=>{
      this.tableData = resp.data.data
      console.log(resp.data.data)
    })
  }
}
</script>

<style scoped>

</style>